<template>
  <div class="displacementBox">
    <div class="selecting">
      <el-select
        popper-class="onlySelect"
        ref="selectDom"
        v-model="displacementValue"
        size="small"
        @change="chooseStove"
        placeholder="请选择报表"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="table_container">
      <el-table
        :data="tableData"
        :height="tabelHeight"
        style="width: 100%"
        :header-cell-style="getRowClass"
        :cell-style="getColumn"
        :row-style="{ fontSize: '10px', height: '5px' }"
      >
        <el-table-column
          v-for="(item, index) in tableHeader"
          :key="index"
          :width="index === 0 ? '100' : '108'"
          :fixed="index === 0 ? true : false"
          :prop="item.prop"
          :label="item.label"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { displacementTable } from "../../api/minuteReportApi";
export default {
  name: "tables",
  data() {
    return {
      // autoHeight: window.innerHeight
      options: [
        {
          value: "five",
          label: "五分钟",
        },
        {
          value: "fifteen",
          label: "十五分钟",
        },
      ],
      displacementValue: "fifteen",
      tableHeader: [
        {
          label: "时刻点",
          prop: "time",
        },
        {
          label: "有功功率",
          prop: "activePower",
        },
        {
          label: "炉阻",
          prop: "furnaceResistance",
        },
        {
          label: "位移",
          prop: "displacement",
        },
        {
          label: "位移变化",
          prop: "displacementChange",
        },
        {
          label: "小位移",
          prop: "smalldisplacement",
        },
        {
          label: "小位移变化",
          prop: "smalldisplacementChange",
        },
        {
          label: "一次电流",
          prop: "primaryCurrent",
        },
        {
          label: "直流电流",
          prop: "DCcurrent",
        },
        {
          label: "直流电压",
          prop: "DCvoltage",
        },
        {
          label: "直流功率",
          prop: "tributaryPower",
        },
        {
          label: "挡位显示",
          prop: "DWXS",
        },
        {
          label: "吨/电量",
          prop: "tPower",
        },
        {
          label: "规格",
          prop: "GG",
        },
        {
          label: "本体重量",
          prop: "BTZL",
        },
        {
          label: "附属品重量",
          prop: "FSPZL",
        },
        // obj.DWXS = item[14]
        // obj.tPower = item[15]
        // obj.GG = item[16]
        // obj.BTZL = item[17]
        // obj.FSPZL = item[18]
      ],
      tableData: [],
      tableData1: [],
      tableData2: [],
      screenHeight: "",
      tabelHeight: "804",
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getData();
    this.getData1();
    this.screenHeight = document.body.clientHeight;
    console.log(this.screenHeight);
    window.onresize = () => {
      return (() => {
        console.log(document.body.clientHeight);
        this.tabelHeight = Math.trunc(document.body.clientHeight * 0.825);
        console.log(this.tabelHeight);
        // if(document.body.clientHeight === 975) {
        //     this.tabelHeight = '792'
        // }else if(document.body.clientHeight === 1080) {
        //     this.tabelHeight = '900'
        // }
      })();
    };
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: rgb(48,52,61);color: rgb(221,224,232);font-weight: unset;font-size: 12px;";
      } else {
        return "";
      }
    },
    getColumn({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 1) {
      //     if (this.redColor) {
      //         return ''
      //     } else {
      //         return 'color: rgb(201,84,106)'
      //     }
      // }
      if (columnIndex === 0) {
        return "padding-left: 3px; z-index: 100;";
      }
    },
    async getData() {
      const params = {
        boxId: "be67c2b8216e49e8981a95663413f115",
        interval: "5",
      };
      const { data } = await displacementTable(params);
      console.log(data, "all");
      data.data.data.slice(1, 96).forEach((item) => {
        let obj = {};
        obj.time = item[0].slice(10, -3);
        obj.activePower = item[1];
        obj.displacementChange = Math.trunc(item[3]);
        obj.displacement = item[2];
        obj.smalldisplacement = item[4];
        obj.smalldisplacementChange = item[5];
        obj.furnaceResistance = item[9];
        obj.primaryCurrent = item[6];
        obj.DCcurrent = item[10];
        obj.DCvoltage = parseFloat(item[11]).toFixed(3);
        obj.tributaryPower = item[12];
        obj.DWXS = item[14];
        obj.tPower = item[15];
        obj.GG = item[16];
        obj.BTZL = item[17];
        obj.FSPZL = item[18];
        // item.data.forEach((item2) => {
        //     if (item2.key === '有功功率'){
        //         obj.activePower = item2.value;
        //     } else if (item2.key === '位移变化量'){
        //         obj.displacementChange = Math.trunc(item2.value);
        //     } else if (item2.key === '位移'){
        //         obj.displacement = item2.value;
        //     } else if (item2.key === '炉阻'){
        //         obj.furnaceResistance = item2.value;
        //     }
        // });
        this.tableData1.push(obj);
      });
    },
    async getData1() {
      const params = {
        boxId: "be67c2b8216e49e8981a95663413f115",
        interval: "15",
      };
      const { data } = await displacementTable(params);
      console.log(data.data.data, "这是想看的");
      data.data.data.slice(1, 96).forEach((item) => {
        let obj = {};
        obj.time = item[0].slice(10, -3);
        obj.activePower = item[1];
        obj.displacementChange = Math.trunc(item[3]);
        obj.displacement = item[2];
        obj.smalldisplacement = item[4];
        obj.smalldisplacementChange = item[5];
        obj.furnaceResistance = item[9];
        obj.primaryCurrent = item[6];
        obj.DCcurrent = item[10];
        obj.DCvoltage = parseFloat(item[11]).toFixed(3);
        obj.tributaryPower = item[12];
        obj.DWXS = item[14];
        obj.tPower = item[15];
        obj.GG = item[16];
        obj.BTZL = item[17];
        obj.FSPZL = item[18];
        // obj.time = item.createTime.slice(10,-3)
        // item.data.forEach((item2) => {
        //     if (item2.key === '有功功率') {
        //         obj.activePower = item2.value;
        //     } else if (item2.key === '位移变化量') {
        //         obj.displacementChange = Math.trunc(item2.value);
        //     } else if (item2.key === '位移') {
        //         obj.displacement = item2.value;
        //     } else if (item2.key === '炉阻') {
        //         obj.furnaceResistance = item2.value;
        //     }
        // });
        this.tableData.push(obj);
        this.tableData2.push(obj);
      });
      console.log(this.tableData, "这是tableData");
    },
    chooseStove(val) {
      if (val === "five") {
        this.tableData = this.tableData1;
      } else if (val === "fifteen") {
        this.tableData = this.tableData2;
      }
    },
  },
};
</script>

